<template>
    <div>
        <div class="group-line">
            <h3 class="group-title">预测分组</h3>
            <div class="group-title-p">
                <p>DIP组:J15.8_93.9401 其他的细南性师炎化吸入</p>
            </div>
            <el-descriptions class="descriptions" :column="2" :size="size" border>
                <el-descriptions-item v-for="item in insutypeOptionsList" :key="item.value">
                    <template #label>
                        <div class="cell-item">
                            {{ item.label }}:
                        </div>
                    </template>
                    {{ item.value }}
                </el-descriptions-item>
            </el-descriptions>
            <el-slider v-model="value" :marks="marks" disabled style="margin: 20px 0 50px;" />
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'medicalRecordsListType',
    props: {
        medicalRecordsInfo: {
            default: {}
        },
        fromtype: {
            default: ''
        }
    },
    components: {

    },
    watch: {
        medicalRecordsInfo(now, old) {
            console.log(now, old)
            this.setMedincalRecordsFrom(now)
        }
    },
    data() {
        return {
            insutypeOptionsList: [
                { label: '推荐分坦', value: '无' },
                { label: '严里程度分型', value: '非肿瘤-轻度' },
                { label: 'DPP平均住院日', value: '9.26' },
                { label: '住院天数:', value: '9' },
                { label: '病例关型:', value: '正常病例' },
                { label: '基准分值:', value: '0.9654' },
                { label: '调整系数:', value: '0.9888' },
                { label: '校正系款:', value: '1.023' },
                { label: '预计常款:', value: '0.852' },
                { label: '住院总费用:', value: '2653.3' },
                { label: 'DIP总费用:', value: '4166.3' },
                { label: '预计盈号:', value: '1852元' },
            ],
            readOnly: true,
            rules: {
                glh:
                    [
                        { required: true, message: '住院流水号不能为空', trigger: 'glh' },
                    ]
            },
            checkObject: {},
            marks: {
                8: '8°C',
                37: '37°C',
                50: {
                    style: {
                        color: '#1989FA',
                    },
                    label: '50%',
                },
                60: {
                    style: {
                        color: '#1989FA',
                        textAlign: 'center'
                    },
                    label: h('div', null, [
                        h('div', { class: 'tooltip-marks-line' }, '|'), h('span', null, 'hello world!')
                    ])
                }
            },
            value: 60,
        }
    },
    computed: {
        ...mapGetters(['insutypeOptions']),
    },
    created() {
        this.setMedincalRecordsFrom(this.medicalRecordsInfo)
        this.readOnly = this.fromtype == '2' ? false : true
    },
    methods: {
        tip(row) {
            console.log('row', row)
            drawer.value = true
        },


        setMedincalRecordsFrom(medicalRecordsFrom) {
            this.medicalRecordsFrom = medicalRecordsFrom
            this.getCheckObject(medicalRecordsFrom)
        },
        getCheckObject(medicalRecordsFrom) {
            let n = 1;
            let qualityControlList = medicalRecordsFrom.qualityControlList
            if (qualityControlList && qualityControlList.length > 0) {
                for (let i = 0; i < qualityControlList.length; i++) {
                    let qualityControlResultModelList = qualityControlList[i].qualityControlResultModelList
                    for (let j = 0; j < qualityControlResultModelList.length; j++) {
                        let checkData = { label: n, content: qualityControlResultModelList[j].ruleRemindMessage, visible: false }
                        this.checkObject[qualityControlResultModelList[j].checkFieldCode] = checkData
                        n++
                    }
                }
            }
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
:deep(.el-row) {
    flex-wrap: nowrap !important;
}


:deep(.el-slider__runway.is-disabled .el-slider__bar) {
    background-color: #0aa879 !important;
}

:deep(.avue-data-tabs .item-footer>span) {
    display: none;
}

.group-title {
    margin: 0;
    color: #4589ce;
}

.group-line {
    margin-top: 20px;
}

// ---
.descriptions {
    margin-top: 20px;
}

.group-title-p {
    font-weight: bold;
    color: #4589ce;

}
</style>